<template>
    <div class="login container">
        <span class="register">注册</span>
        <div class="title-box">
            <span class="title">登陆</span>
        </div>
        <div class="form-box">
            <div class="input-box bottom-line">
                <van-icon name="user-o" size="22"/>
                <input class="input" v-model="phone" type="text" placeholder="请输入手机号">
            </div>
            <div class="input-box bottom-line">
                <van-icon name="eye-o" size="22" />
                <input class="input" v-model="password" type="password" placeholder="请输入密码">
            </div>
            <div class="input-box">
                <van-checkbox class="checked-box" v-model="checked" shape="square" icon-size="16px">
                    <span class="checked-desc">是否使用专用服务器</span>
                </van-checkbox>
            </div>
            <van-button class="login-btn" type="info" block size="small" @click="login">登陆</van-button>
        </div>
    </div>
</template>
<script>
import { Toast } from 'vant';

export default {
    name: 'Login',
    data() {
        return {
            phone:'',
            password:'',
            checked:false
        }
    },
    methods:{
        login() {
            let phone = this.phone.trim();
            if(phone.length <= 0) {
                Toast('手机号不能为空');
                return false;
            } 
            // else {
            //     let parn = /^[1-9][0-9]{10}$/;
            //     if(!parn.test(phone)) {
            //         Toast('手机号格式不正确');
            //         return false;
            //     }
            // }
            // let password = this.password.trim();
            // if(password.length <= 0) {
            //     Toast('密码不能为空');
            //     return false;
            // }
            Toast.loading({
                message: '登陆中...',
                duration: 0
            });
            this.$axios.post('/user/login',{userid:phone}).then((res)=>{
                Toast.clear();
                let data = res.data;
                console.log(data);
                if(data.status !== 'success') {
                    Toast.fail(data.message);
                } else {

                    Toast.success({
                        message:data.message,
                        duration:1000
                    });
                    let item = data.data;
                    localStorage.setItem('userInfo', JSON.stringify(item));
                    setTimeout(() => {
                        this.$router.push('/');
                    },1000);
                }
            })
        },
    }
}
</script>
<style lang="less">
@import '../../css/var.less';
.login {
    background:#fff;
    padding:0 50px;
    box-sizing: border-box;
    .register {
        position:absolute;
        font-size: 15px;
        color:@color;
        top: @space;
        right: @space;
    }
    .title-box {
        margin-top:60px;
        text-align: center;
        font-size: 18px;
        color:@color;
        .title {
            display: inline-block;
            padding: 5px 10px;
            border-bottom: 1px solid @color;
        }
    }
    .form-box {
        margin-top:40px;
        .bottom-line {
            border-bottom: 1px solid #eee;
        }
        .input-box {
            display:flex;
            flex-direction:row;
            justify-content:flex-start;
            align-items:center;
            height: 30px;
            margin-bottom:15px;
            padding-bottom:5px;
            color:#666;
            input {
                margin-left:10px;
                display:inline-block;
                flex: 1;
                height:100%;
                font-size: 14px;
            }
            .checked-box {
                padding-left:3px;
                .checked-desc {
                    font-size:12px;
                    color:#666;
                    margin-left:7px;
                }
            }
        }
        .login-btn {
            margin-top:20px;
        }
    }
}
</style>